File Upload in Node js using Multer

File Upload in Node js using Multer is an important feature for any web application. Multer is a Node.js or express middleware, that makes it easy to handle multipart/form-data when your users upload files. When a website user uploads a file to a server, it is usually submitted via a form and encoded as multipart/form-data.

As I already said, Multer is Middleware for Express. Middleware is a piece of software which connects various applications or components of the software. Middleware runs in Express and sends incoming requests to the server. In our case, when uploading files Multer works as a helper.

In this tutorial, I’ll show you the basic procedure of File Upload in Node js using Multer.

Also Read: Drag and Drop File Upload using Dropzone JS, PHP & MySQL

Table of Contents

File Upload in Node js using Multer

REQUIREMENTS

Project Setup

For this project we’ll be using the Node Express framework. You will, of course, need to have Node installed.

Watch: How to install Nodejs tutorials in hindi

Create a directory for our project


mkdir file-upload-nodejs

mkdir file-upload-nodejs

Move into the directory


cd file-upload-nodejs

cd file-upload-nodejs

create a .json file that manages all the dependencies for our application


npm init

npm init

Now, install Multer, Express, and the other necessary dependencies


npm install express multer body-parser nodemon

npm install express multer body-parser nodemon

Now create an app.js file

in app.js, we will initialize module, create an Express app, and create a server for connecting to browsers.


const express = require('express')
const bodyParser= require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({extended: true}))
//ROUTES WILL GO HERE

app.listen(3000, () => console.log('Server started on port 3000'));

const express = require('express')

const bodyParser= require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({extended: true}))

//ROUTES WILL GO HERE

app.listen(3000, () => console.log('Server started on port 3000'));

Create your project routing file routes/upload.js

Multer Configuration

Add the multer object to your routing file


var multer = require('multer');

var multer = require('multer');

We will upload the file in public/uploads directory. So our multer will contain the following configuration:

Multer Storage, File size Limits and file Filter configuration


var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './public/uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now()+file.originalname)
    }
  });

// this code will handle file types like jpeg, jpg, and png
  const fileFilter=(req, file, cb)=>{
   if(file.mimetype ==='image/jpeg' || file.mimetype ==='image/jpg' || file.mimetype ==='image/png'){
       cb(null,true);
   }else{
       cb(null, false);
   }
  }

var upload = multer({ 
    storage:storage,
    limits:{
        fileSize: 1024 * 1024 * 5 // define limit 5mb max file upload size
    },
    fileFilter:fileFilter
 });

var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, './public/uploads/')

filename: function (req, file, cb) {

cb(null, Date.now()+file.originalname)

}

});

// this code will handle file types like jpeg, jpg, and png

const fileFilter=(req, file, cb)=>{

if(file.mimetype ==='image/jpeg' || file.mimetype ==='image/jpg' || file.mimetype ==='image/png'){

cb(null,true);

}else{

cb(null, false);

}

var upload = multer({

storage:storage,

limits:{

fileSize: 1024 * 1024 * 5 // define limit 5mb max file upload size

fileFilter:fileFilter

});

Now the multer is ready to upload the file in public/uploads folder.

Create a routes/index.html file

Write all the code that will be served to the client to upload file.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First App</title>
</head>
<body>
 <!--  SINGLE FILE -->
<form action="/fileupload" enctype="multipart/form-data" method="POST"> 
   <input type="file" name="image" />
   <input type="submit" value="Upload"/>
</form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>My First App</title>

</head>

<body>

</form>

</body>

</html>

App Routing

Now we will add the multer configuration in the routing file and add a post routing.

Copy and paste below code in routing file routes/upload.js


var express = require('express');
var router = express.Router();
var multer  = require('multer');

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './public/uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now()+file.originalname)
    }
  })

  const fileFilter=(req, file, cb)=>{
   if(file.mimetype ==='image/jpeg' || file.mimetype ==='image/jpg' || file.mimetype ==='image/png'){
       cb(null,true);
   }else{
       cb(null, false);
   }

  }

var upload = multer({ 
    storage:storage,
    limits:{
        fileSize: 1024 * 1024 * 5
    },
    fileFilter:fileFilter
 });

router.get('/',function(req,res){
  res.sendFile(__dirname + '/index.html');
 
});
router.post("/fileupload",upload.single('image'),function(req,res,next){
   
const filename=req.file.filename;
 res.json({
            message:"Image Uploaded Successfully",
            filename:filename
        });
    });

module.exports=router;

var express = require('express');

var router = express.Router();

var multer = require('multer');

var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, './public/uploads/')

filename: function (req, file, cb) {

cb(null, Date.now()+file.originalname)

}

})

const fileFilter=(req, file, cb)=>{

if(file.mimetype ==='image/jpeg' || file.mimetype ==='image/jpg' || file.mimetype ==='image/png'){

cb(null,true);

}else{

cb(null, false);

}

var upload = multer({

storage:storage,

limits:{

fileSize: 1024 * 1024 * 5

fileFilter:fileFilter

});

router.get('/',function(req,res){

res.sendFile(__dirname + '/index.html');

});

router.post("/fileupload",upload.single('image'),function(req,res,next){

const filename=req.file.filename;

res.json({

message:"Image Uploaded Successfully",

filename:filename

});

module.exports=router;

Now open your app.js file and search var app = express();

copy and paste below code after var app = express(); to set route


var uploadRouter = require('./routes/upload');
app.use('/', uploadRouter);

var uploadRouter = require('./routes/upload');

app.use('/', uploadRouter);

So now preview complete code of file:

app.js


const express = require('express')
const bodyParser= require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({extended: true}))
//ROUTES WILL GO HERE
var uploadRouter = require('./routes/upload');
app.use('/', uploadRouter);
 
app.listen(3000, () => console.log('Server started on port 3000'));

const express = require('express')

const bodyParser= require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({extended: true}))

//ROUTES WILL GO HERE

var uploadRouter = require('./routes/upload');

app.use('/', uploadRouter);

app.listen(3000, () => console.log('Server started on port 3000'));

routes/upload.js


var express = require('express');
var router = express.Router();
var multer  = require('multer');
 
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './public/uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now()+file.originalname)
    }
  })
 
  const fileFilter=(req, file, cb)=>{
   if(file.mimetype ==='image/jpeg' || file.mimetype ==='image/jpg' || file.mimetype ==='image/png'){
       cb(null,true);
   }else{
       cb(null, false);
   }
 
  }
 
var upload = multer({ 
    storage:storage,
    limits:{
        fileSize: 1024 * 1024 * 5
    },
    fileFilter:fileFilter
 });
 
router.get('/',function(req,res){
  res.sendFile(__dirname + '/index.html');
 
});
router.post("/fileupload",upload.single('image'),function(req,res,next){
   
const filename=req.file.filename;
 res.json({
            message:"Image Uploaded Successfully",
            filename:filename
        });
    });
 
module.exports=router;

var express = require('express');

var router = express.Router();

var multer = require('multer');

var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, './public/uploads/')

filename: function (req, file, cb) {

cb(null, Date.now()+file.originalname)

}

})

const fileFilter=(req, file, cb)=>{

if(file.mimetype ==='image/jpeg' || file.mimetype ==='image/jpg' || file.mimetype ==='image/png'){

cb(null,true);

}else{

cb(null, false);

}

var upload = multer({

storage:storage,

limits:{

fileSize: 1024 * 1024 * 5

fileFilter:fileFilter

});

router.get('/',function(req,res){

res.sendFile(__dirname + '/index.html');

});

router.post("/fileupload",upload.single('image'),function(req,res,next){

const filename=req.file.filename;

res.json({

message:"Image Uploaded Successfully",

filename:filename

});

module.exports=router;

Now our code is ready for test.

Now open your terminal and run below command


node app.js
or
nodemon

node app.js

nodemon

After running node app.js. You will get message:

node app.js
Server started on port 3000

Now open http://localhost:3000/ in your browser

Now select your image file and click on upload button. After successfully upload you will get following response on browser.

Download Code

Conclusion:

I hope you found this tutorial helpful for your project. File Upload in Node js using Multer is an important feature for any web application. So Here we are, completed the basic file uploading using multer in node.js and express.js

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co